<template>
  <div class="weblist_wrap">
    <div v class="top_wrap">
      <div class="tab_wrap" v-if="tabData">
        <el-tabs v-model="tabData.value" @tab-click="tabChange">
          <el-tab-pane
            v-for="(item, index) in tabData.list"
            :key="index"
            :label="item.label"
            :name="item.value"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div class="tools_wrap">
        <vxe-button
          class="my_btn"
          v-for="(item, index) in tableConfig.buttonList.filter(e=>!e.isInline)"
          :key="index"
          :status="item.type"
          size="mini"
          :icon="item.icon"
          v-if="item.name&&!item.hidden"
          :content="tableConfig.noRole?item.name:buttonObj[formatBtn(item.id)]"
          :disabled="loading"
          @click="btnClickHandle(item)"
        ></vxe-button>
        <div class="slot_wrap">
          <div class="query_wrap" v-if="queryNoTabData&&JSON.stringify(queryNoTabData)!='{}'">
            <div class="showMore" @click="toggleQuery" v-if="originQueryHidden.length">
              <i class="el-icon-arrow-down" v-if="!toggleQueryStatus"></i>
              <i class="el-icon-arrow-up" v-if="toggleQueryStatus"></i>
            </div>
            <div
              class="query_item"
              v-if="item.label&&item.kjlx&&index!='undefined'&&!item.hidden&&!item.realHidden"
              v-for="(item, index) in tableConfig.queryConfig"
              :class="item.width||'w_33'"
              :key="index"
            >
              <div
                class="lab"
                :style="{flex:'0 0 '+(tableConfig.queryLabelWidth?tableConfig.queryLabelWidth:90)+'px'}"
              >{{item.label}}：</div>
              <div class="con">
                <vxe-input
                  v-if="item.kjlx=='input'"
                  class="my_inp"
                  v-model="item.value"
                  :placeholder="'请输入'+item.label"
                  size="small"
                  @blur="changeQuery(item)"
                ></vxe-input>
                <vxe-input
                  v-if="item.kjlx=='number'"
                  class="my_inp"
                  v-model="item.value"
                  type="number"
                  :placeholder="'请输入'+item.label"
                  size="small"
                  @blur="changeQuery(item)"
                ></vxe-input>
                <vxe-radio-group v-if="item.kjlx=='radio'" v-model="item.value">
                  <vxe-radio
                    v-for="(item2, index2) in item.list"
                    :key="index2"
                    :label="item2.value"
                    :content="item2.label"
                  ></vxe-radio>
                </vxe-radio-group>
                <vxe-select
                  v-if="item.kjlx=='select'"
                  v-model="item.value"
                  :placeholder="'请输入'+item.label"
                  @change="changeQuery(item)"
                  size="mini"
                  class="my_inp"
                >
                  <vxe-option
                    v-for="(item2, index2) in item.list"
                    :value="item2.value"
                    :label="item2.label"
                  ></vxe-option>
                </vxe-select>
                <el-date-picker
                  v-if="item.kjlx=='date'"
                  v-model="item.value"
                  :placeholder="'请选择'+item.label"
                  value-format="yyyy-MM-dd"
                  class="my_inp"
                  size="mini"
                  type="date"
                ></el-date-picker>
                <el-date-picker
                  v-if="item.kjlx=='daterange'"
                  v-model="item.rangeValue"
                  :placeholder="'请选择'+item.label"
                  value-format="yyyy-MM-dd"
                  class="my_inp"
                  size="mini"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  type="daterange"
                  @change="changeRange($event,item)"
                ></el-date-picker>
                <el-date-picker
                  v-if="item.kjlx=='dateMonthrange'"
                  v-model="item.rangeValue"
                  :placeholder="'请选择'+item.label"
                  value-format="yyyy-MM-dd"
                  class="my_inp"
                  size="mini"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  type="monthrange"
                  @change="changeRange($event,item)"
                ></el-date-picker>
                <el-date-picker
                  v-if="item.kjlx=='datetime'"
                  v-model="item.value"
                  :placeholder="'请选择'+item.label"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  class="my_inp"
                  size="mini"
                  type="datetime"
                ></el-date-picker>
                <el-date-picker
                  v-if="item.kjlx=='datetimerange'"
                  v-model="item.rangeValue"
                  :placeholder="'请选择'+item.label"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  class="my_inp"
                  size="mini"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  type="datetimerange"
                  @change="changeRange($event,item)"
                ></el-date-picker>
              </div>
            </div>
          </div>
          <div class="query_btn_wrap" :class="tableConfig.queryBtnWidth||'w_33'">
            <div class="query_btn">
              <!-- <vxe-button class="my_btn" status="primary" size="mini" @click="resetQuery">重置</vxe-button>
              <vxe-button class="my_btn" status="primary" size="mini" @click="query">搜索</vxe-button>-->
              <el-button
                class="my_btn"
                size="small"
                round
                plain
                type="primary"
                @click="resetQuery"
              >重 置</el-button>
              <el-button class="my_btn" size="small" round type="primary" @click="query">搜 索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="table_wrap">
        <vxe-table
          class="my_table"
          ref="my_table"
          :key="tableKey"
          :data="rows"
          border
          show-header-overflow
          show-overflow
          highlight-hover-row
          height="auto"
          auto-resize
          stripe
          round
          resizable
          :loading="loading"
          :checkbox-config="checkboxConfig"
          :radio-config="radioConfig"
          header-row-class-name="my_head"
          :show-footer="JSON.stringify(footer)!='{}'"
          @cell-dblclick="dblRowHandle"
        >
          <vxe-table-column
            width="50"
            v-if="!tableConfig.singleselect"
            type="checkbox"
            field="my_check"
            align="center"
          ></vxe-table-column>
          <vxe-table-column
            width="50"
            v-if="tableConfig.singleselect"
            type="radio"
            field="my_check"
            align="center"
          ></vxe-table-column>
          <vxe-table-column align="center" type="seq" title="序号" width="60" field="index"></vxe-table-column>
          <vxe-table-column
            v-if="!item.hidden"
            v-for="(item, index) in tableConfig.listConfig"
            :key="index"
            :field="item.zdname"
            :title="item.label"
            :align="tableConfig.align?tableConfig.align:'center'"
            :width="item.width||null"
            :sortable="!item.tableButtonList"
            :fixed="item.fixed"
          >
            <template #default="{ row ,rowIndex }">
              <div v-if="item.formatFunc">
                <div v-html="formatFunc(row,item.zdname,item.formatFunc)"></div>
              </div>
              <div v-if="!item.formatFunc">
                <div v-if="!item.format">{{row[item.zdname]}}</div>
                <div v-if="item.format">{{item.format(row[item.zdname])}}</div>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-if="tableConfig.buttonList.filter(e=>e.isInline&&!e.hidden).length"
            :title="'操作'"
            :align="'center'"
            :width="tableConfig.buttonList.filter(e=>e.isInline&&!e.hidden).length*110"
            :fixed="'right'"
          >
            <template #default="{ row ,rowIndex }">
              <div>
                <el-button
                  class="my_btn"
                  v-for="(item2, index2) in tableConfig.buttonList.filter(e=>e.isInline&&!e.hidden)"
                  :key="index2"
                  size="mini"
                  :content="item2.name"
                  :type="item2.type"
                  :icon="item2.icon"
                  plain
                  @click.stop="btnClickHandle2(item2,row)"
                >{{item2.name}}</el-button>
              </div>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
    </div>
    <div class="footer_wrap">
      <vxe-pager
        perfect
        :current-page.sync="pageIndex"
        :page-size.sync="pageSize"
        :loading="loading"
        :total="total"
        :page-sizes="[20, 50, 100,1000]"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        @page-change="pageChange"
      >
        <template #left>
          <vxe-button size="small" @click="getData">
            <template #default>
              <i :class="{'el-icon-refresh':!loading,'el-icon-loading':loading}"></i>
            </template>
          </vxe-button>
        </template>
      </vxe-pager>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
defineOptions({ name: "syWeblist" });
</script>

<style scoped lang="scss">
.weblist_wrap {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  .top_wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .tools_wrap {
      padding: 5px;
      box-sizing: border-box;
      background: #fff;
      min-height: 38px;
      .my_btn {
        margin: 5px;
      }
      .slot_wrap {
        width: 100%;
      }
      .query_btn_wrap {
        display: flex;
        justify-content: flex-end;
      }
      .query_wrap {
        display: flex;
        flex-wrap: wrap;
        background-color: #f4f5f7;
        border: 1px solid #ccc;
        padding: 5px;
        box-sizing: border-box;
        border-radius: 4px;
        margin: 10px 0 15px;
        position: relative;
        .showMore {
          position: absolute;
          border: 1px solid #ccc;
          width: 80px;
          height: 18px;
          font-size: 13px;
          display: flex;
          align-items: center;
          justify-content: center;
          left: calc(50% - 40px);
          // right: -1px;
          bottom: -18px;
          border-top: none;
          background: #f4f5f7;
          border-radius: 0 0 5px 5px;
          cursor: pointer;
          color: #409eff;
          i {
            color: #409eff;
            font-size: 20px;
          }
        }
        .query_item {
          display: flex;
          align-items: center;
          padding: 5px 10px;
          width: 33%;
          box-sizing: border-box;
          .my_inp {
            width: 100%;
          }
          .lab {
            color: #5faeff;
            // font-weight: bold;
            padding-right: 3px;
            flex: 0 0 90px;
            font-size: 14px;
          }
          .con {
            flex: 1;
            display: flex;
            justify-content: space-between;
            .my_btn {
              width: 48%;
              margin-right: 0;
            }
          }
        }
        .w_25 {
          width: 25% !important;
          .query_btn {
            width: 100%;
          }
        }
        .w_33 {
          width: 33% !important;
          .query_btn {
            width: 100%;
          }
        }
        .w_50 {
          width: 50% !important;
          .query_btn {
            width: 50%;
          }
        }
        .w_100 {
          width: 100% !important;
          .query_btn {
            width: 25%;
          }
        }
        .query_btn {
          // flex: 1;
          display: flex;
          .my_btn {
            width: 100%;
          }
        }
      }
    }
    .table_wrap {
      flex: 1;
      overflow: hidden;
      width: 100%;
    }
  }
  .footer_wrap {
    flex: 0 0 48px;
  }
  .head_item {
    text-align: center;
    width: 100%;
  }
  .vxe-header--column.col--ellipsis {
    // height: 60px !important;
  }
  .vxe-header--column .vxe-cell {
    max-height: 80px !important;
  }
  .vxe-body--column {
    height: 36px !important;
  }
  .vxe-header--column {
    background: linear-gradient(to bottom, #fff 0, #f2f2f2 100%) !important;
    border-right: 1px solid #e8eaec !important;
  }
  .vxe-body--column.col--checkbox {
    background: linear-gradient(to bottom, #fff 0, #f2f2f2 100%) !important;
    border-right: 1px solid #e8eaec !important;
  }
  .vxe-loading {
    background-color: rgba(255, 255, 255, 0.9) !important;
  }
  .vxe-pager.is--loading::after {
    background-color: rgba(0, 0, 0, 0.1) !important;
  }
  .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--label,
  .vxe-table--render-default .vxe-cell--radio .vxe-radio--label {
    padding-left: 0 !important;
  }
  .my_table {
    width: 100%;
  }
  .my_table .col-blue {
    color: #409eff !important;
    font-weight: bold;
    background-color: #f5f7fa;
  }
}
</style>